<template>
  <!-- ------------------简历库管理-------------- -->
  <div style="margin:20px;">
    <!-- 头部 -->
    <div>
      <span>投递培训机构:</span>
      <el-select v-model="form.qy_name" size="small" clearable placeholder="点击展开企业列表">
        <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.name"></el-option>
      </el-select>
      <span style="margin-left:5px;">应聘岗位:</span>
      <el-select v-model="form.gw_name" size="small" clearable placeholder="点击展开岗位二级分类">
        <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
      </el-select>

      <span style="margin-left:5px;">应聘状态:</span>
      <el-select v-model="form.yp_state" size="small" clearable placeholder="全部">
        <el-option
          v-for="item in ypStates"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>

      <span style="margin-left:5px;">投递时间:</span>
      <el-date-picker
        v-model="form.tdTime"
        type="datetimerange"
        range-separator="——"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        value-format="yyyy-MM-dd HH:mm:ss"
      ></el-date-picker>

      <el-button
        size="small"
        style="margin-left:40px;"
        type="success"
        icon="el-icon-search"
        @click="search"
      >查询</el-button>

      <el-button size="small" style="float:right;" type="warning" @click="exportExcel">导出Excel</el-button>
    </div>

    <!-- 表格 -->
    <el-table
      :data="jobOffersRecordData"
      style="width: 100%;margin-top:20px;"
      border
      v-loading="loading"
      :default-sort="{prop: 'createTime', order: 'descending'}"
    >
      <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
      <el-table-column prop="name" label="报名者" align="center"></el-table-column>
      <el-table-column prop="address" label="报名者地址" align="center"></el-table-column>
      <el-table-column prop="courses" label="培训分类" align="center"></el-table-column>
      <el-table-column prop="companyName" label="培训机构" align="center"></el-table-column>
      <el-table-column
        prop="createTime"
        label="投递时间"
        sortable
        :formatter="formatter"
        align="center"
      ></el-table-column>
      <el-table-column label="报名者状态" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.status" size="small" @change="selectChange(scope.row)">
            <el-option
              v-for="item in ypStates"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="培训开始时间" align="center">
        <template slot-scope="scope">
          <div
            v-if="contain(editStartIds, scope.row.id)"
            style="display:flex;flex-direction:column;align-items:center"
          >
            <el-input v-model="editStartValues[scope.$index]" placeholder="格式:2019-08-09"></el-input>
            <el-button type="primary" @click="removeEdits(scope, true)" style="margin-top:10px">确定</el-button>
          </div>

          <div v-else>
            <span>{{ scope.row.hiredate|formatDate }}</span>
            <el-link>
              <i class="el-icon-edit" @click="addEdits(scope.row, true)"></i>
            </el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="培训结束时间" align="center">
        <template slot-scope="scope">
          <div
            v-if="contain(editEndIds, scope.row.id)"
            style="display:flex;flex-direction:column;align-items:center"
          >
            <el-input v-model="editEndValues[scope.$index]" placeholder="格式:2019-08-09"></el-input>
            <el-button type="primary" @click="removeEdits(scope, false)" style="margin-top:10px">确定</el-button>
          </div>

          <div v-else>
            <span>{{ scope.row.leavedate|formatDate }}</span>
            <el-link>
              <i class="el-icon-edit" @click="addEdits(scope.row, false)"></i>
            </el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="上传人" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="findDetail(scope.row)" style="color:blue;" type="text">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.start"
      :limit.sync="listQuery.length"
      @pagination="search"
    />

    <!-- 详情页对话框 -->
    <el-dialog title="简历详情" append-to-body :visible.sync="showDetailDialog" width="50%">
      <div>
        <h3 style="font-weight: 700;">个人基本情况</h3>

        <div style="width:100%;">
          <el-row>
            <el-col span="4">
              <div>
                <el-image style="width:100%; height:auto;" :src="jobOffersItem.imgUrl" fit="cover"></el-image>
              </div>
            </el-col>
            <el-col span="20">
              <div style="margin-left:30px;display: flex;flex-direction: column;">
                <el-form
                  :model="ruleForm"
                  label-position="left"
                  status-icon
                  :rules="rules"
                  ref="form"
                  label-width="100px"
                  class="mini"
                >
                  <el-form-item label="姓名:">
                    <span>{{ jobOffersItem.name }}</span>
                  </el-form-item>

                  <el-form-item label="性别:">
                    <span
                      style="margin-top:10px;"
                    >{{ (jobOffersItem.sex == 'MAN') ? '男' : (jobOffersItem.sex == 'WOMAN') ? '女' : '' }}</span>
                  </el-form-item>

                  <el-form-item label="年龄:">
                    <span style="margin-top:10px;">{{ getAge(jobOffersItem.birthday) }}</span>
                  </el-form-item>

                  <el-form-item label="联系电话:">
                    <span style="margin-top:10px;">{{ jobOffersItem.tel }}</span>
                  </el-form-item>

                  <el-form-item label="身份证号:">
                    <span style="margin-top:10px;">{{ jobOffersItem.idCard }}</span>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
        </div>

        <el-divider></el-divider>

        <h3 style="font-weight: 700;">其它说明</h3>

        <span style="margin-top:10px;">{{ jobOffersItem.records }}</span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  getJobOffersRecord,
  getCompanyList,
  getJobCategoryOffices,
  editJobOffersRecord,
  exportExcel
} from "@/api/educationReq.js";
import { getAge, parseTime, formatDate } from "@/utils/index";
export default {
  components: { Pagination },
  filters: {
    formatDate(time) {
      if (time == undefined) {
        return "";
      }
      let date = new Date(time);
      console.log(new Date(time));
      return formatDate(date, "yyyy-MM-dd");
    }
  },
  data() {
    return {
      loading: false,
      // 正在编辑的列表
      editStartIds: [],
      editEndIds: [],
      // 编辑关联的值
      editStartValues: [],
      editEndValues: [],
      // 对话框
      showDetailDialog: false,
      //简历列表
      jobOffersRecordData: [],
      // 简历单项
      jobOffersItem: {},
      //企业列表
      companyList: [],
      options: [],
      ypStates: [
        {
          value: "DEFAULT",
          label: "培训中"
        },
        {
          value: "HIRE",
          label: "已培训"
        },
        {
          value: "LEAVE",
          label: "已就业"
        }
      ],
      // 提交数据体
      form: {
        // 企业名称
        qy_name: "",
        // 岗位名称
        gw_name: "",
        // 应聘状态
        yp_state: "",
        // 投递时间
        tdTime: []
      },
      // 分页
      total: 0,
      listQuery: {
        start: 1,
        length: 10,
        companyId: "",
        companyName: "",
        // 应聘者状态
        status: ""
      }
    };
  },
  watch: {
    "form.tdTime": function(vv, ss) {
      console.log(vv);
    }
  },
  created() {
    this.getCompanyList();
    this.search();
    this.getJobCategoryOffices();
  },
  methods: {
    getAge,
    parseTime,
    //查询企业列表
    getCompanyList() {
      getCompanyList().then(res => {
        this.companyList = res.data;
      });
    },
    //查询岗位列表
    getJobCategoryOffices() {
      getJobCategoryOffices().then(res => {
        console.log(res);
        this.options = res.data;
      });
    },
    // //获取简历记录列表
    // getJobOffersRecordList() {
    //   this.loading = true;
    //   var params = {
    //     pageNum: this.listQuery.start - 1,
    //     pageSize: this.listQuery.length
    //   };
    //   getJobOffersRecord(params).then(res => {
    //     console.log(res);
    //     this.total = res.data.totalElements;
    //     this.jobOffersRecordData = res.data.content;

    //     this.editStartValues = [];
    //     this.editEndValues = [];
    //     this.jobOffersRecordData.forEach(item => {
    //       this.editStartValues.push("");
    //       this.editEndValues.push("");
    //     });
    //     this.loading = false;
    //   });
    // },
    // 扩展队列是否包含某项数据
    contain(lists, data) {
      var hasValue = false;
      lists.forEach(item => {
        if (item === data) hasValue = true;
      });
      if (hasValue) return true;
      else return false;
    },
    // 添加编辑
    addEdits(row, isStart) {
      if (isStart) {
        this.editStartIds.push(row.id);
      } else {
        this.editEndIds.push(row.id);
      }
    },
    // 删除编辑
    removeEdits(scope, isStart) {
      if (isStart) {
        var index = this.editStartIds.indexOf(scope.row.id);

        if (-1 != index) {
          var date = new Date(this.editStartValues[scope.$index]);
          var value1 = Date.parse(date);
          // 请求变更数据
          var params = {
            id: scope.row.id,
            hiredate: value1
          };
          editJobOffersRecord(params).then(res => {
            this.search();
          });

          // 样式修改
          this.editStartIds.splice(index, 1);
        }
      } else {
        var index = this.editEndIds.indexOf(scope.row.id);

        if (-1 != index) {
          var date = new Date(this.editEndValues[scope.$index]);
          var value2 = Date.parse(date);
          // 请求变更数据
          var params = {
            id: scope.row.id,
            leavedate: value2
          };
          editJobOffersRecord(params).then(res => {
            this.search();
          });

          // 修改样式
          this.editEndIds.splice(index, 1);
        }
      }
    },
    // 查看详情
    findDetail(data) {
      this.jobOffersItem = data;
      this.showDetailDialog = true;
    },
    // 导出Excel
    exportExcel() {
      //导出的方法
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../../excel/Export2Excel");
        const tHeader = [
          "报名者",
          "报名者地址",
          "培训分类",
          "应聘岗位",
          "投递培训机构",
          "投递时间",
          "报名者状态",
          "培训开始时间",
          "培训结束时间",
          "上传人"
        ];
        // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "name",
          "address",
          "courses",
          "offers",
          "companyName",
          "createTime",
          "status",
          "hiredate",
          "leavedate",
          "creator"
        ];
        // 上面的index、nickName、name是tableData里对象的属性
        // const list = this.jobOffersRecordData; //把data里的tableData存到list

        const list = [];
        this.jobOffersRecordData.forEach(item => {
          var ss = {};
          ss.name = item.name;
          ss.offers = item.offers;
          ss.address = item.address;
          ss.courses = item.courses;
          ss.companyName = item.companyName;
          ss.createTime = parseTime(item.createTime);
          ss.status = this.filterStatus(item.status);
          ss.hiredate = this.formatExcelDate(item.hiredate);
          ss.leavedate = this.formatExcelDate(item.leavedate);
          ss.creator = item.creator;

          list.push(ss);
        });

        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "简历管理");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    // 查询
    search() {
      this.loading = true;
      var params = {
        pageNum: this.listQuery.start - 1,
        pageSize: this.listQuery.length,
        companyName: this.form.qy_name,
        offers: this.form.gw_name,
        status: this.form.yp_state,
        startTime: null == this.form.tdTime ? "" : this.form.tdTime[0],
        endTime: null == this.form.tdTime ? "" : this.form.tdTime[1]
      };

      getJobOffersRecord(params).then(res => {
        console.log(res);
        this.total = res.data.totalElements;
        this.jobOffersRecordData = res.data.content;

        this.editStartValues = [];
        this.editEndValues = [];
        this.jobOffersRecordData.forEach(item => {
          this.editStartValues.push("");
          this.editEndValues.push("");
        });
        this.loading = false;
      });
    },
    filterStatus(status) {
      switch (status) {
        case "DEFAULT":
          return "应聘中";
        case "HIRE":
          return "入职";
        case "LEAVE":
          return "离职";
        default:
          return "";
      }
    },
    formatExcelDate(time) {
      if (time == undefined) {
        return "";
      }
      let date = new Date(time);
      console.log(new Date(time));
      return formatDate(date, "yyyy-MM-dd");
    },
    //时间格式化
    formatter(row, column) {
      return parseTime(row.createTime);
    },
    // 监听选项变化
    selectChange(row) {
      var params = {
        id: row.id,
        status: row.status
      };
      editJobOffersRecord(params).then(res => {
        this.search();
      });
    }
  }
};
</script>

<style>
</style>
